<template>
	<view style="overflow-x: hidden;">
		<view class="bg bg-black-graw bg-div">
			<!-- <image class="bg-img" src="/static/member/bg.png" mode=""></image> -->
		</view>

		<cu-custom bgColor="bg-black-graw" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content"><text class="text-df">会员中心</text></block>
		</cu-custom>

		<view class="info" :style="{marginTop: statusBarHeight - 10 + 'px'}">
			<image class="info-bg" src="/static/member/info-bg.png" mode=""></image>

			<view class="info-content">
				<view class="info-avatar">
					<image class="info-avatar-pic" :src="user.avatar" mode=""></image>
				</view>
				<view class="info-name">
					<text class="info-name">
						<text>{{ user.nickname }}</text> 
						<text class="tn-color-orange--dark tn-text-bold tn-icon-vip-fill tn-padding-left-sm" v-if="user.info.status == 1"></text>
					</text>

					<text class="info-level">
						<block  v-if="user.info.status == 1">
							<text class="" style="opacity: 0.5; margin-right:10rpx">尊敬的</text>
							<text class="tn-color-orange--dark tn-text-bold">{{user.info.type_text}}</text>
						</block>
						<text class="" v-else>升级会员享额外特权</text>
					</text>
				</view>

				<view class="info-asset tn-flex-3" @click="goTo('/pages/score/score-log')">
					<view class="info-asset-item text-right" style="margin-left: auto;">
						<text class="iai-title">积分</text>
						<text class="iai-value">{{user.info.score}}</text>
					</view>
				</view>
			</view>

			<view class="info-expire-time" v-if="user.info.status == 1">
				<text>会员有效期：</text>
				<text class="tn-text-bold">{{ user.info.expire_time_text }}</text> 
			</view>

		</view>

		<!-- 待定 -->
		<!-- <text class="tip">升级得积分</text> -->

		<view class="tn-text-bold tn-text-lg tn-margin tn-padding-top-sm">
			<text class="">会员特权</text>
		</view>

		<view class="about__wrap tn-margin-top-xl" v-show="false">
			<view class="tn-flex tn-flex-wrap tn-bg-white course-shadow course-radius">
				<view class="tn-padding-sm tn-col-3" v-for="(item, index) in privilegeData" :key="index">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view
							class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-color-white"
							:class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
							<view :class="[`tn-icon-${item.icon}`]"></view>
						</view>
			 		<view class="tn-text-center">
							<text class="tn-text-ellipsis">{{item.title}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="about__wrap tn-margin-top-xl">
			<view class="tn-flex tn-flex-wrap tn-bg-white course-shadow course-radius">
				<view class="tn-padding-sm tn-col-3" v-for="(item, index) in privilegeData" :key="index">
					<view class="tn-flex-1 tn-padding-sm tn-radius" @click="goTo(item.url)">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view
								class="icon11__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur"
								:class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
								<view :class="[`tn-icon-${item.icon}`]"></view>
							</view>
							<view class="tn-color-black tn-text-df tn-text-center tn-margin-top-sm">
								<text class="tn-text-ellipsis">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="tn-text-bold tn-text-lg tn-margin tn-padding-top-sm">
			<text class="">会员开通</text>
		</view>
		<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
			<scroll-view scroll-x>
				<view class="member">
					<view class="member-item" :class="current == index ? 'member-item-active': ''"
						v-for="(item, index) in memberOptions" :key="index" :style="{marginLeft: !index ? '30rpx': ''}"
						@click="memberChange(index)">
						<view class="member-tag" v-if="item.tag">
							<text class="member-tag-text">{{item.tag}}</text>
						</view>
						<text class="member-item-duration">{{ item.name }}</text>
						<view class="member-item-price">
							<text class="rmb">￥</text>
							<text class="member-item-price-text">{{ item.price }}</text>
						</view>
						<text class="member-item-des">{{ item.desc }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="button update" hover-class="hover" @click="createOrder">
			<text class="button-text" v-if="user.info.status == 0">立即开通</text>
			<text class="button-text" v-else-if="user.info.status == 1">您已是会员</text>
			<text class="button-text" v-else-if="user.info.status == 2">重新开通</text>
		</view>
		<view class="button update" hover-class="hover" @click="showActivate = true" v-if="user.info.status != 1">
			<text class="button-text">我有激活码</text>
		</view>

		<view class="margin-bottom-xl"></view>

		<!-- 开通确认弹窗 -->
		<tui-modal :show="showConfirm" @click="confirmCreateOrder" :content="confirmContent" color="#333" :size="32" :button="confirmButton"></tui-modal>
		<!-- 开通结果弹窗 -->
		<tui-modal :show="showResult" @click="payResult" :content="payResultContent" :button="resultButton"></tui-modal>
		<!-- 激活会员弹窗 -->
		<tn-modal v-model="showActivate" :custom="true" :showCloseBtn="true">
			<view class="custom-modal-content">
				<view class="">
					<view class="tn-text-lg tn-text-bold tn-color-purplered tn-text-center tn-padding">会员激活码</view>
					<view class="tn-bg-gray--light"
						style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 50rpx 0 60rpx 0;">
						<input type="text" v-model="memberCode" placeholder-style="color:#AAAAAA" maxlength="20"
							placeholder="请输入会员激活码" />
					</view>
				</view>
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
					<tn-button shape="round" backgroundColor="#5677fc" padding="40rpx 0" width="60%" shadow fontBold @click="activateMember">
						<text class="tn-color-white">激活</text>
					</tn-button>
				</view>
			</view>
		</tn-modal>
	</view>
</template>

<script>
	import CuCustom from '@/colorui/components/cu-custom.vue'
	import userApi from "@/common/api/user.js"

	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	export default {
		components: {
			CuCustom
		},
		data() {
			return {
				imgUrl: this.url,
				user: null,
				memberConfigs: [],
				statusBarHeight,
				current: 0,
				memberOptions: [],
				showConfirm: false,
				confirmContent: '',
				confirmButton: [{
						text: "取消",
						type: "red",
						plain: true
					},
					{
						text: "确定",
						type: "green",
						plain: false
					}
				],
				showResult: false,
				payResultContent: '',
				resultButton: [{
					text: '确定',
					type: 'green'
				}],
				privilegeData: [{
						title: '积分功能',
						icon: 'flower',
						color: 'orange',
					},
					{
						title: '无限刷题',
						icon: 'empty-order',
						color: 'orange',
					},
					{
						title: '免费考试',
						icon: 'edit-form',
						color: 'orange',
					},
					{
						title: '免费考场',
						icon: 'order',
						color: 'orange',
					},
				],
				
				// 会员激活
				showActivate: false,
				memberCode: '',
			}
		},
		onShow() {
			this.ajax()
		},
		methods: {
			goTo(page) {
				this.utils.goto(page)
			},
			/**
			 * 获取用户信息和会员配置
			 */
			ajax() {
				userApi.getUserInfo().then(res => {
					console.log('user info res', res)
					this.user = res.data
					uni.setStorageSync('user', this.user)
				})

				userApi.getMemberOpenConfig().then(res => {
					console.log('getMemberOpenConfig res', res)
					this.memberOptions = res.data
				})
			},
			/**
			 * 选择开通会员类型
			 * @param {Object} index
			 */
			memberChange(index) {
				this.current = index
			},
			/**
			 * 点击开通会员按钮
			 */
			createOrder() {
				if (this.user.info.status == 1) {
					this.utils.alert('您当前已经是会员了，无须重复开通', 'error')
					return
				}
				if (!this.memberOptions[this.current]) {
					this.utils.alert('请选择要开通的会员类型', 'error')
					return
				}

				this.confirmContent = `确定开通「${this.memberOptions[this.current].name}」吗？`
				this.showConfirm = true
			},
			/**
			 * 确认开通，创建订单
			 */
			confirmCreateOrder(e) {
				
				if (e.index == 0) {
					this.showConfirm = false
				} else {
					const member_config_id = this.memberOptions[this.current].id
					userApi.createMemberOrder(this, member_config_id).then(res => {
						console.log('createMemberOrder res', res)
						
						if (res.code != 1) {
							this.utils.toast('支付失败：' + res.msg)
							return
						}
					
						// 开通需要费用时
						if (res.data.type == 'orderPay') {
							// 支付参数
							const payment = res.data.payment
							uni.requestPayment({
								// 微信支付
								timeStamp: payment.timeStamp,
								nonceStr: payment.nonceStr,
								package: payment.package,
								signType: payment.signType,
								paySign: payment.paySign,
								success: (payRes) => {
									console.log('支付成功', payRes)
					
									// 显示支付结果弹窗
									this.showResult = true
									this.payResultContent = '支付成功，恭喜您成为会员啦~'
								},
								fail: (res) => {
									console.log('支付异常', res)
					
									// 显示支付结果弹窗
									this.showResult = true
									this.payResultContent = '支付失败了'
								},
								complete: (res) => {
									// 隐藏开通会员弹窗
									this.showConfirm = false
					
									// 刷新会员信息
									this.ajax()
								}
							})
						} else {
							// 免费开通
							// this.utils.goto('member-result?type=' + res.data.type)
					
							// 显示支付结果弹窗
							this.showResult = true
							this.payResultContent = '支付成功，恭喜您成为会员啦~'
					
							// 刷新会员信息
							this.ajax()
						}
					
					})
				}
			},
			/**
			 * 点击支付结果弹窗按钮
			 */
			payResult() {
				this.showResult = false
			},
			/**
			 * 会员激活
			 */
			activateMember() {
				if (!this.memberCode) {
					this.utils.toast('请输入会员激活码')
					return
				}
				
				userApi.activateMember(this, this.memberCode).then(res => {
					if (res.code) {
						this.utils.alert('激活成功')
						
						// 清空并关闭弹窗
						this.memberCode = ''
						this.showActivate = false
						
						// 刷新会员信息
						this.ajax()
					} else {
						this.utils.alert(res.msg)
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			margin: 20rpx 30rpx;
			// margin-top: -230rpx;
		}
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 420rpx;
		z-index: -2;

		&-img {
			width: 100%;
			height: 100%;
		}
	}

	.bg-div {
		z-index: -1;
		border-radius: 0 0 10% 10%;
	}

	.bg-black-graw {
		background-image: linear-gradient(45deg, #101528, #252c45);
		color: #ffffff;
	}

	.main-title {
		padding: 30rpx 30rpx;
		font-size: 34rpx;
		color: #1C1C1C;
	}

	.tip {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #A5A3A2;
	}

	.rmb {
		font-size: 26rpx;
		color: #E3BE83;
	}

	.hover {
		opacity: 0.7;
	}

	.nav {
		position: fixed;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 44px;
		padding: 0 30rpx;
		background-image: url('~@/static/member/nav-bg.png');
		background-size: 100%;
		z-index: 99;

		&-back {
			width: 20rpx;
			height: 40rpx;
		}

		&-title {
			color: #FFFFFF;
			font-size: 42rpx;
		}

		&-space {
			width: 70rpx;
			height: 40rpx;
		}
	}

	.info {
		position: relative;
		padding: 0 15rpx;
		width: 730rpx;
		height: 360rpx;

		&-bg {
			position: absolute;
			width: 730rpx;
			height: 360rpx;
			z-index: -1;
		}

		&-content {
			padding: 110rpx 50rpx 0 50rpx;
			margin-bottom: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		
		&-expire-time {
			padding: 0rpx 50rpx 0 50rpx;
			opacity:0.5;
			color: #fff;
		}

		&-avatar {
			margin-right: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 85rpx;
			height: 85rpx;
			background-color: #fff;
			padding: 0rpx;
			border-radius: 50%;

			&-pic {
				width: 85rpx;
				height: 85rpx;
				border-radius: 50%;
			}
		}

		&-name {
			display: flex;
			flex-direction: column;
			color: #FFFFFF;
			font-size: 35rpx;
		}

		&-level {
			margin-top: 15rpx;
			font-size: 24rpx;
		}

		&-asset {
			// padding: 0 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			&-item {
				display: flex;
				flex-direction: column;
			}
		}
	}

	.iai {
		&-title {
			margin-bottom: 20rpx;
			// margin-right: 100rpx;
			font-size: 24rpx;
			color: #CFB386;
		}

		&-value {
			font-size: 35rpx;
			color: #FFFFFF;
		}
	}

	.member {
		position: relative;
		margin-bottom: 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		&-tag {
			position: absolute;
			top: -2rpx;
			left: -2rpx;
			width: 170rpx;
			height: 36rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background-image: url('~@/static/member/tag.png');
			background-size: 100%;

			&-text {
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}

		&-item {
			position: relative;
			padding: 40rpx 0;
			margin-left: 15rpx;
			width: 200rpx;
			height: 230rpx;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			border: solid 2rpx #F2F2F3;
			border-radius: 12rpx;

			&-active {
				border-color: #EDD2A9;
				background-color: #FBF1E5;
			}

			&-duration {
				margin-bottom: 30rpx;
				font-size: 26rpx;
				color: #1C1C1C;
			}

			&-price {
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: baseline;

				&-text {
					font-size: 48rpx;
					color: #E3BE83;
				}
			}

			&-des {
				font-size: 22rpx;
				color: #A5A3A2;
			}
		}
	}

	.button {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 85rpx;
		border-radius: 50rpx;
		background-image: linear-gradient(#EFCF9E, #E4BF85);

		&-text {
			font-size: 30rpx;
			color: #504b4b;
		}
	}

	.update {
		margin: 35rpx 30rpx 20rpx 30rpx;
	}

	.privilege {
		padding: 0 30rpx;
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;

		&-item {
			margin: 0 23rpx;
			margin-bottom: 25rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			&-pic {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}

			&-text {
				font-size: 24rpx;
				color: #383738;
			}
		}
	}

	.level {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		height: 466rpx;
		background-image: url('~@/static/member/vip-bg.png');
		background-size: 100%;

		&-rate {
			position: absolute;
			top: 43rpx;
			left: 33rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			&-text1 {
				margin-right: 20rpx;
				color: #1C1C1C;
				font-size: 34rpx;
			}

			&-text2 {
				font-size: 34rpx;
				color: #C07C07;
			}
		}

		&-info {
			// position: absolute;
			// top: 188rpx;
			// left: 350rpx;
			margin-top: 70rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			&-icon {
				margin-bottom: 20rpx;
				width: 48rpx;
				height: 38rpx;
			}

			&-text {
				margin-bottom: 20rpx;
				font-size: 26rpx;
				color: #292929;
			}

			&-integral {
				font-size: 40rpx;
				color: #C07C07;
			}
		}

		&-distance {
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 35rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			&-text {
				font-size: 26rpx;
				color: #292929;
			}

			&-button {
				padding: 0 30rpx;
				height: 60rpx;
			}
		}
	}

	.course-shadow {
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.course-radius {
		border-radius: 15rpx;
	}

	/* 图标容器11 start */
	.icon11 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}
		}
	}
</style>
